<template lang="pug">
  el-drawer.commonDrawer(
    :title="`${!id ? '新增' : '编辑'}产品`"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="480px"
    @close="$_handleCancel"
  )
    .drawer-content
      form-box(
        ref="form"
        :fields="addFields"
        :showBtns="false"
        :formProps="{ disabled }"
        :layoutCol="{ xs: 24, md: 24, lg: 24 }"
      )
    .drawer-footer.tr
      el-button.gradientVertical(size="large" round :loading="submitting" @click="submitHandle") 确定
</template>
<script>
import { productSubmit } from '../../api'
import { isEmpty } from '@/utils/util'

export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    values: {
      type: Object,
      default: () => ({})
    },
    disabled: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      submitting: false,
      info: {}
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    addFields () {
      const { info } = this
      console.log(`info:${info}`)
      console.log(info)
      return [
        {
          label: '产品名称',
          key: 'name',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.name
        },
        {
          label: '是否可用',
          key: 'isVisible',
          type: 'radio',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.isVisible?.toString(),
          fieldProps: {
            options: [
              { id: '1', name: '可用' },
              { id: '0', name: '不可用' }
            ]
          }
        },
        {
          label: '产品类型',
          key: 'type',
          type: 'select',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.type?.toString(),
          fieldProps: {
            options: [
              { id: '1', name: '托班' },
              { id: '2', name: '早教' },
              { id: '3', name: '其他' },
              { id: '4', name: '摄像头' },
              { id: '5', name: '订金' }
            ]
          },
          events: {
            change: val => this.formChange(val, 'type')
          }
        },
        {
          label: '退费策略',
          key: 'refundPolicy',
          type: 'select',
          rules: [{ required: true, message: '请输入' }],
          fieldProps: {
            options: [
              { id: '0', name: '不退费' },
              { id: '3', name: '手动填写' },
              { id: '4', name: '出勤率' }
            ]
          },
          initialValue: info?.refundPolicy || '0',
          events: {
            change: val => this.formChange(val, 'refundPolicy')
          }
        },
        {
          label: '退费常量',
          key: 'refundConst',
          type: 'number',
          fieldProps: {
            'controls-position': 'right'
          },
          hidden: String(info.refundPolicy) !== '3'
        },
        {
          label: '单价',
          key: 'standardAmount',
          type: 'number',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.standardAmount,
          fieldProps: {
            'controls-position': 'right'
          }
        },
        {
          label: '单位',
          key: 'unit',
          disabled: info.type !== '3',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.unit,
          fieldProps: {
            placeholder: '月/课时'
          }
        }
      ]
    }
  },
  watch: {
    values: {
      handler (val) {
        this.info = val
      },
      immediate: true
    }
  },
  methods: {
    formChange (val, key) {
      if (isEmpty(this.$props.id)) {
        const { info } = this
        console.log(val, key)
        if (key === 'type') {
          switch (val) {
            case '1':
              info.unit = '月'
              break
            case '2':
              info.unit = '课时'
              break
            default:
              info.unit = ''
          }
        }
        this.info = {
          ...info,
          [key]: val
        }
      }
    },
    // 提交
    async submitHandle () {
      const values = await this.$refs.form.submitForm()
      console.log(values)
      this.submitting = true
      productSubmit({
        id: this.id,
        ...values
      }, !!this.id).then(() => {
        this.$message.success('提交成功')
        this.$emit('getList', true)
        this.$_handleCancel()
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
